iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
Modern Web

從零開始學習 Next.js系列 第 20

Day20 - 提開發者體驗 (DX),使用 path alias

  • 分享至 

  • xImage
  •  

前言

今天我想來點輕鬆的議題,是一個大家在開發專案時都會遇到的狀況。在開發時有時候資料夾結構會變得很深,想要拿到外部的檔案時以相對路徑的方式會很麻煩:

import Button from "../../../../components/Button";

在 Next.js 的其中一個常見的習慣是會有 pages/components/ 資料夾, pages/ 放的是一個頁面的進入點,有些頁面中會使用的元件會放在 components/ 的資料夾中,這時不論是 pages/ 的資料夾很深,或者是 components/ 很深,在使用一些其他的元件以相對路徑 import 就會有不方便的情況發生。

在幾年前這是比較麻煩的情況,但是現在 2021 年, Next.js 已經非常容易做到 path alias 的設定,讓 import 事半功倍。

在 tsconfig 中設定 baseUrl

現在新建立 Next.js 專案的預設資料夾結構 pages/ 會被放在根目錄,但是如果是從其他專案 migrate 到 Next.js,或是團隊有習慣的專案資料夾結構,我們會需要在 tsconfig 設定專案的 baseUrl

如果以 Next.js 的專案來說,會設定 baseUrl: '.'

baseUrl
├── components
│   └── Button.tsx
├── pages
├── tsconfig.json
└── blablala...

在這樣設定的情況下,你可以使用絕對路徑 import Button:

import Button from "components/Button";

而且如果你使用的是 VS Code 開發,甚至在輸入 import 的程式碼時就會建議你可以使用哪個路徑:

baseUrl

Path alias

接下來延續上面的設定, baseUrl 只能指定一個路徑,但是一定有些時候,會想要有不同的路徑可以使用,以上面 components/Button.tsx 這個簡單的例子來說,會是以下設定:

{
  "baseUrl": ".",
  "paths": {
    "@/components/*": ["components/*"],
    "@/lib/*": ["lib/*"]
  }
}

在這樣設定的情況下,你可以使用 path alias:

import Button from "@/components/Button";

在新增了 paths 這個設定之後,VS Code 建議的路徑就會是 paths 的設定:

path alias

另一種資料結構的案例

如果是從 CRA 移植過的來專案,也許專案結構會是把檔案放在 src 的資料夾中,如果重新定義資料夾結構也許會有點麻煩,或是破壞原本團隊的習慣,因此 Next.js 目前在預設的情況下就支援了 src 的資料夾結構,所以可以放心的把 pages/ 跟一些其他的檔案都放在 src 資料夾中。

└── src (baseUrl)
    ├── components
    │   └── Button.tsx
    └── pages
        └── index.tsx

在這種情況下,我們會需要修改 tsconfig.json 中的 baseUrl./src ,但是 paths 的設定不用改變,就可以使用 path alias:

{
  "baseUrl": "./src",
  "paths": {
    "@/components/*": ["components/*"],
    "@/lib/*": ["lib/*"]
  }
}

Reference


上一篇
Day19 - 寫出更有品質的程式碼,信 eslint 得永生
下一篇
Day21 - _ document 可以做什麼呢?
系列文
從零開始學習 Next.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言